很多时候，美工会觉得默认的select下拉框很难看（特别是右侧的下拉箭头按钮），他们通常喜欢用一个自定义的图标来代替这个按钮。这样就只能用 js + div 来模拟了，倒腾了一番，用jQuery模拟了下，当然网上这种文章也不少，只是懒得去看找，又重新发明轮子鸟:)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>自己实现的下拉框</title> <style type="text/css" media="all"> *{font-size:12px;line-height:18px;list-style:none;padding:0;margin:0;text-decoration:none;color:#000;border:0} .page{text-align:center;margin:50px;} input{border-bottom:solid 1px #ccc;height:18px} .expand{display:none;position:absolute;width:200px;height:100px;overflow-y:auto;border:solid 1px #ccc}; .expand li{margin:1px 0;background:#fff} .expand a{text-decoration:none;display:block;padding:0 5px;background:#efefef;margin:1px 0} .expand a:hover{background:#ff9} </style> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script> <script type="text/javascript"> function showExpand(targetId, expandId, expand_class) { //先关掉其它弹出的层 if (expand_class != undefined) { $("." + expand_class).hide(); } //判断是否为IE var isIE = (! +[1, ]); var expand = $("#" + expandId); var target = $("#" + targetId); var dx = 0; if (isIE) { dx = -2; } else { dx = 0; } expand.get(0).style.left = target.get(0).getBoundingClientRect().left + dx + "px"; if (isIE) { dx = 17; } else { dx = 19; } expand.get(0).style.top = parseInt(target.get(0).getBoundingClientRect().top) + dx + "px"; expand.show(); //每个li点击时赋值 $("#" + expandId).find("li").each(function (i) { $(this).show().click(function () { target.val($(this).text().split(' ')[1]); expand.hide(); }) }) } function search(srcId, expandId) { var expand = $("#" + expandId); var src = $("#" + srcId); var A = expand.find("a"); var v = src.val().toUpperCase(); A.each(function (i) { if (v.length >= 2) { if ($(this).text().toUpperCase().indexOf(v) == -1) { $(this).parent().hide(); } else { $(this).parent().show(); } } if (v.length <= 0) { $(this).parent().show(); } }) src.val(v); } $().ready(function(){ $("#txt_city").keyup(function(){ search('txt_city','city_select1'); }).focus(function(){ showExpand('txt_city','city_select1','expand') }) $("#txt_city2").keyup(function(){ search('txt_city2','city_select2'); }).focus(function(){ showExpand('txt_city2','city_select2','expand') }) }) function fnTest(){ document.getElementById("txtTarget").value = document.getElementById("txtSrc").value; } </script></head><body> <div class="page" style="text-align: center"> <input type="text" value="" id="txt_city" class="input_expand" /><a href="#" onclick="showExpand('txt_city','city_select1','expand')">▼</a> <div class="expand" id="city_select1"> <ul> <li><a href="javascript:void(0)">SH 上海</a></li> <li><a href="javascript:void(0)">BJ 北京</a></li> <li><a href="javascript:void(0)">HZ 杭州</a></li> <li><a href="javascript:void(0)">WH 武汉</a></li> <li><a href="javascript:void(0)">NJ 南京</a></li> <li><a href="javascript:void(0)">WX 无锡</a></li> </ul> </div> <input type="text" value="" id="txt_city2" class="input_expand" /><a href="#" onclick="showExpand('txt_city2','city_select2','expand')">▼</a> <div class="expand" id="city_select2"> <ul> <li><a href="javascript:void(0)">CN 中文</a></li> <li><a href="javascript:void(0)">EN 英语</a></li> <li><a href="javascript:void(0)">JP 日本</a></li> <li><a href="javascript:void(0)">RA 俄语</a></li> <li><a href="javascript:void(0)">FA 法语</a></li> <li><a href="javascript:void(0)">00 其它</a></li> </ul> </div> <br/> <br/> <input type="text" id="txtSrc" onkeyup="fnTest()" /> <br/> <input type="text" id="txtTarget" /> </div></body></html> |
无图无真相，真相在此：
不足之处：
1、按键盘上下键时，没有高亮的自动移动
2、键入文字自动过滤结果时，感觉相对原生的select有些不自然
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦